class BadgeComponent extends HTMLElement {
  #span;

  connectedCallback() {
    if (!this.#span) {
      this.#span = document.createElement("span");
      this.#span.className = "x-badge-label";
    }
    this.insertBefore(this.#span, this.firstChild);
    this.update();
  }

  update() {
    console.log("更新了");
    if (this.#span) this.#span.textContent = this.content;
  }

  static get observedAttributes() {
    return ["content"];
  }

  attributeChangedCallback() {
    this.update();
  }

  get content() {
    console.log("值访问了");
    return this.getAttribute("content");
  }

  set content(value) {
    if (this.content !== value) {
      console.log("值改变了", value);
      this.setAttribute("content", value);
    }
  }
}

export const registerBadgeComponent = () =>
  customElements.define("x-badge", BadgeComponent);
